<template>

  <div class="login-container">

    <!-- 顶部导航 -->

    <div class="header">

      <span>登录</span>

      <span class="register" @click="zhuce">注册账号 ></span>

    </div>



    <!-- 标题 -->

    <div class="title">智慧园区</div>



    <!-- 登录方式切换 -->

    <van-tabs v-model="loginMethod" @click="handleTabClick">

      <van-tab name="account" title="账号密码登录">

        <div class="form">

          <van-field

              v-model="user.username"

              placeholder="请输入账号"

              clearable

          />

          <van-field

              v-model="user.password"

              type="password"

              placeholder="请输入密码"

              clearable

          />

          <div class="submit">

            <van-button type="primary" block @click="login1">登录</van-button>

          </div>

        </div>
        <div>
          <h6>v:1.0.3 炸了</h6>
        </div>
      </van-tab>



      <van-tab name="phone" title="验证码登录">

        <div class="form">

          <van-field

              v-model="user.phone"

              placeholder="请输入手机号"

              clearable

          />

          <van-field

              v-model="user.code"

              placeholder="请输入验证码"

              clearable

          >

            <template #button>

              <van-button size="small" type="primary" @click="sendCode">

                发送验证码

              </van-button>

            </template>

          </van-field>

          <div class="submit">

            <van-button type="primary" block @click="login2">登录</van-button>

          </div>

        </div>

      </van-tab>

    </van-tabs>



    <!-- 第三方登录 -->

    <div class="third-party">
      <van-button
          block
          :loading="loading"
          @click="loginWithAlipay">
        支付宝登录
      </van-button>



    </div>
    <div>
      <a href="https://login.dingtalk.com/oauth2/auth?
redirect_uri=http%3A%2F%2F119.3.186.30%3A9999%2Fapi-user-service%2Fauth
&response_type=code
&client_id=dingfjzkmnv6dffwboij
&scope=openid
&state=dddd
&prompt=consent">钉钉登录</a>
    </div>


    <!-- 注册弹窗 -->

    <van-popup v-model="showRegister" position="right" :style="{ width: '100%', height: '100%' }">

      <div class="register-form">

        <van-nav-bar

            title="注册账号"

            left-text="返回"

            left-arrow

            @click-left="showRegister = false"

        />


        <div class="form">

          <van-field

              v-model="user.username"



              placeholder="请设置账户名"

              clearable

          />

          <van-field

              v-model="user.phone"

              placeholder="请输入手机号"

              clearable

          />

          <van-field

              v-model="user.code"

              placeholder="请输入验证码"

              clearable

          >

            <template #button>

              <van-button size="small" type="primary" @click="sendCode">

                发送验证码

              </van-button>

            </template>

          </van-field>

          <van-field

              v-model="user.password"

              type="password"

              placeholder="请设置密码"

              clearable

          />



          <div class="submit">

            <van-button type="primary" block @click="login3">注册</van-button>

          </div>

        </div>

      </div>

    </van-popup>

  </div>

</template>



<script>

import axios from "axios";



export default {

  data() {

    return {

      showRegister: false,

      loginMethod: 'account',

      user: {

        username: '',

        password: '',

        phone: '',

        code: ''

      }

    }

  },

  methods: {
    loginWithAlipay() {
      fetch('http://localhost:9999/api-user-service/api/alipay/getAuthUrl')
          .then(response => response.text())
          .then(authUrl => {
            window.location.href = authUrl;
          })
          .catch(error => {
            console.error('获取授权URL失败:', error);
          });
    },

    handleTabClick(name) {

      this.loginMethod = name;

    },

    zhuce() {
      this.$toast.fail('请联系后台管理');
      // this.showRegister = true;

    },

    // 其他方法保持不变

    login1() {

      if (this.user.username == '' || this.user.password == '') {

        this.$toast.fail('请输入账号和密码');

        return;

      }

      axios.post('http://localhost:9999/api-user-service/user/login?username=' + this.user.username + '&password=' + this.user.password).then(res => {

        var r = res.data;

        if (r.code == 1) {

          var user = r.data;

          localStorage.setItem("aa", JSON.stringify(user));

          this.$toast.success("登录成功");

          this.$router.replace('/medical')

        } else {

          this.$toast.fail(r.message);

        }

      })

    },

    login2() {

      if (this.user.phone == '') {

        this.$toast.fail("请输入手机号");

        return;

      }

      if (this.user.code == '') {

        this.$toast.fail("请输入验证码");

        return;

      }

      if (!/1[3-9][0-9]{9}/g.test(this.user.phone)) {

        this.$toast.fail("请输入合法手机号");

        return;

      }

      axios.post("http://localhost:9999/api-user-service/user/login2?phone=" + this.user.phone + "&code=" + this.user.code).then(res => {

        if (res.data.code == 1) {

          var user = res.data.data;

          localStorage.setItem("aa", JSON.stringify(user));

          this.$toast.success("登录成功");

          this.$router.replace('/medical')

        } else {

          this.$toast.fail(res.data.message);

        }

      })

    },

    sendCode() {

      if (this.user.phone == '') {

        this.$toast.fail("请输入手机号");

        return;

      }

      if (!/1[3-9][0-9]{9}/g.test(this.user.phone)) {

        this.$toast.fail("请输入合法手机号");

        return;

      }

      axios.post("http://localhost:9999/api-user-service/user/sendcode?phone=" + this.user.phone).then(res => {

        if (res.data.code == 1) {

          this.$toast.success("发送成功,验证码为" + res.data.data);

        } else {

          this.$toast.fail(res.data.message);

        }

      })

    },

    login3() {
      if (!/1[3-9][0-9]{9}/g.test(this.user.phone)){
        this.$message.error("请输入合法手机号");
        return;
      }

      if (this.user.phone==''){
        this.$message.error("请输入手机号");
        return;
      }

      if (this.user.password==''){
        this.$message.error("请设置密码");
        return;
      }

      if (this.user.code==''){
        this.$message.error("请输入验证码");
        return;
      }

      axios.post("http://localhost:9999/api-user-service/user/add", this.user).then(res => {

        this.$toast.success("注册成功");

        this.showRegister = false;

        this.$router.replace('/login')

      })

    }

  }

}

</script>


<style scoped>

.login-container {

  min-height: 100vh;

  background: #fff;

}


.header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 16px;

}


.register {

  color: #999;

  font-size: 14px;

}


.title {

  font-size: 24px;

  font-weight: bold;

  text-align: center;

  margin: 40px 0;

}


.form {

  padding: 20px 16px;

}


.submit {

  margin-top: 24px;

}


.third-party {

  display: flex;

  justify-content: center;

  gap: 16px;

  margin-top: 32px;

}


.register-form {

  height: 100%;

  background: #fff;

}

</style>
